import React from 'react'
import {log} from "../../../utils/commonfunc";
import beanSrc from "../../../res/images/web/mall/应豆-金1@2x.png"
import hotSrc from "../../../res/images/web/mall/HOT 红标签@2x.png"
import {withRouter,} from 'react-router-dom'

import yuan100 from'../../../res/images/web/mall/小话费-100@2x.png'
import yuan50 from'../../../res/images/web/mall/小话费-50@2x.png'
import yuan10 from'../../../res/images/web/mall/小话费-10@2x.png'
import {pushWithSearch} from "../mall";
import defaultSrc from "../../../res/images/web/mall/商品列表占位@2x.png";

const MallHotItemCard = (props) => {

    const data = props.data
    // Buynum: 0
    // Detail: "妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花妙蛙花"
    // Id: 4
    // Image: (3) ["https://youtoball.oss-cn-shenzhen.aliyuncs.com/product/20210310153341.1.png", "https://youtoball.oss-cn-shenzhen.aliyuncs.com/product/20210310153342.2.png", "https://youtoball.oss-cn-shenzhen.aliyuncs.com/product/20210310165912.2.png"]
    // Name: "妙蛙花"
    // Notice: "妙蛙花123"
    // Oldprice: 20000
    // Pos: 0
    // Price: 10000
    // Propid: 0
    // Style: 2
    let background = `no-repeat url(${defaultSrc}) center/cover`
    // const style = data.Style
    // if (style === 1) {
    //     const oldPrice = data.Oldprice
    //     const yuanSrcs = {
    //         10: yuan10,
    //         50: yuan50,
    //         100: yuan100,
    //     }
    //     background = `no-repeat url(${yuanSrcs[oldPrice]}) center/cover`
    // } else {
    //     if (data.Image) {
    //         background = `no-repeat url(${data.Image[0]}) center/cover`
    //     }
    // }

    if (data.Image) {
        background = `no-repeat url(${data.Image[0]}) center/cover`
    }

    return <div
        className='mall-hot-item-card'
        onClick={() => pushWithSearch(props.history, './mall/' + data.Id)}
    >
        <img src={hotSrc} alt='' className='mall-hot-item-card-hot-icon'/>
        <div
            className='mall-item-thumb'
            style={{
                background: background,
            }}
        />
        <div
            className='mall-item-info'
        >
            <p>{data.Name}</p>
            <div className='mall-item-info-bean flex-align-center'>
                <img src={beanSrc} alt=''/>
                <p>{data.Price}</p>
            </div>
        </div>
    </div>
}

export default withRouter(MallHotItemCard)